<template>
  <div>
    <div class="topo-header">
      <div class="line-left"></div>
      <img class="arrow-left" src="@/assets/images/pid/arrow-left-dark.png" />
      <div class="title">{{ props.title }}</div>
      <img class="arrow-right" src="@/assets/images/pid/arrow-right-dark.png" />
      <div class="line-right"></div>
    </div>
    <iframe class="iframe" :src="url" frameborder="0" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { queryDictData } from "@/api/common";
const { VITE_PID_AND_TOPO_URL } = import.meta.env;
const url = ref<string>("");
onMounted(async () => {
  const allTopos = await queryDictData({ typeCode: "PID_AND_TOPO" });
  const topo = allTopos.filter(item => item.value === props.code);
  if (topo && topo.length > 0) {
    url.value = `${VITE_PID_AND_TOPO_URL}` + topo[0].name;
  }
});
// 父级传过来的值
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "",
    required: true
  },
  code: {
    type: String,
    default: "",
    required: true
  }
});
</script>
<style lang="scss" scoped>
.topo-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #303a65;
  // border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  .title {
    margin: 0 32px;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
  }
  .line-left {
    margin-left: 16px;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
  }
  .arrow-left {
    margin-left: 16px;
    width: 66px;
    height: 24px;
  }
  .arrow-right {
    margin-right: 16px;
    width: 66px;
    height: 24px;
  }
  .line-right {
    margin-right: 16px;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
  }
}
.iframe {
  background: transparent url("@/assets/images/pid/topo-bg.png") no-repeat fixed center/100% 100%;
  width: 100%;
  height: calc(100vh - 173px);
}
</style>
